<template>
  <div class="">
    <el-card>
      <el-row>
        <!-- 实时数据 -->
        <el-col :span="16">
          <LiveOverview :tabs="realTimeData" @refresh="getStatistics" />
        </el-col>

        <!-- 饼图 -->
        <el-col :span="8">
          <pie-chart
            :series-obj="seriesObj"
            :legend="legend"
            :tooltip="tooltip"
            :color="color"
            height="180px"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { useFilterSingleStatistics } from '@/hooks'
export default {
  name: 'MemberTimeData',
  components: {},
  props: {},
  data() {
    return {
      // 实时数据列表
      realTimeData: [
        {
          isShow: true,
          baseData: {
            key: 'totalUserNum',
            label: '全部会员',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalShopUserNum',
            label: '好物特工',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayShopUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalTavernUserNum',
            label: '酒馆长',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayTavernUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalRepastUserNum',
            label: '秦宗',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayRepastUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalWaKaUserNum',
            label: '挖咖',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayWaKaUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalLeaseUserNum',
            label: '机咖',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayLeaseUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalJjtUserNum',
            label: '机甲通',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayJjtUserNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalBrowseNum',
            label: '浏览量',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayBrowseNum',
            isShow: true,
            value: ''
          }
        }
      ],
      // 图标配置
      legend: {
        orient: 'vertical',
        x: '50%',
        y: '50%',
        data: ['活跃会员', '其他会员']
      },
      color: ['#709DEF', '#D1D1D1'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {d}%'
      },
      seriesObj: {
        name: '占比',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['30%', '60%'],
        label: {
          normal: {
            show: true,
            zlevel: 1,
            padding: [0, 8, 0, 8],
            backgroundColor: '#fff',
            position: 'center',
            formatter: ['{value|{d}%}', '{name|{b}}'].join('\n'),
            rich: {
              value: {
                color: '#303133',
                fontSize: 18,
                fontWeight: 'bold'
              },
              name: {
                color: '#303133'
              }
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        // 图片数据
        data: [
          { value: 0, name: '活跃会员', key: 'totalActiveUserNum' },
          { value: 0, name: '其他会员', key: 'totalUserNum' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取统计数据
    this.getStatistics()
  },
  mounted() {},
  methods: {
    // 获取统计数据
    async getStatistics() {
      try {
        const { data } = await this.$http.user.user.statistics()
        this.realTimeData = useFilterSingleStatistics(this.realTimeData, data)
        this.seriesObj.data = this.seriesObj.data.map(el => {
          if (el.key === 'totalUserNum') {
            return { ...el, value: data.totalUserNum - data.totalActiveUserNum }
          }
          return { ...el, value: data[el.key] }
        })
      } catch (error) {
        console.log('getStatistics', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
